﻿import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: root
    width: 400
    height: 600
    visible: true
    title: "QML 列表选择示例(带动画)"

    // 数据模型
    ListModel {
        id: listModel
        ListElement { name: "选项1"; selected: false }
        ListElement { name: "选项2"; selected: false }
        ListElement { name: "选项3"; selected: false }
        ListElement { name: "选项4"; selected: false }
        ListElement { name: "选项5"; selected: false }
        ListElement { name: "选项6"; selected: false }
        ListElement { name: "选项7"; selected: false }
        ListElement { name: "选项8"; selected: false }
    }

    // 单选模式
    property bool singleSelectionMode: true
    property int lastSelectedIndex: -1

    Column {
        anchors.fill: parent
        spacing: 10

        // 模式切换按钮(添加动画)
        Row {
            id: controlRow
            spacing: 10
            padding: 10

            Button {
                id: singleSelectBtn
                text: "单选模式"
                highlighted: singleSelectionMode
                onClicked: {
                    if (!singleSelectionMode) {
                        modeSwitchAnimation.start()
                        singleSelectionMode = true
                        clearSelection()
                    }
                }

                Behavior on opacity {
                    NumberAnimation { duration: 200 }
                }
            }

            Button {
                id: multiSelectBtn
                text: "多选模式"
                highlighted: !singleSelectionMode
                onClicked: {
                    if (singleSelectionMode) {
                        modeSwitchAnimation.start()
                        singleSelectionMode = false
                    }
                }

                Behavior on opacity {
                    NumberAnimation { duration: 200 }
                }
            }

            Button {
                text: "清除选择"
                onClicked: {
                    clearSelection()
                    selectionClearAnimation.start()
                }

                Behavior on scale {
                    NumberAnimation { duration: 100; easing.type: Easing.InOutQuad }
                }

                onPressedChanged: {
                    if (pressed) {
                        scale = 0.95
                    } else {
                        scale = 1.0
                    }
                }
            }
        }

        // 列表视图(添加多项动画)
        ListView {
            id: listView
            width: parent.width
            height: parent.height - 100
            clip: true
            model: listModel
            spacing: 2

            // 添加列表项进场动画
            add: Transition {
                NumberAnimation {
                    property: "opacity";
                    from: 0;
                    to: 1.0;
                    duration: 300
                }
                NumberAnimation {
                    property: "scale";
                    from: 0.8;
                    to: 1.0;
                    duration: 300;
                    easing.type: Easing.OutBack
                }
            }

            // 列表项动画
            delegate: Rectangle {
                id: delegateItem
                width: listView.width
                height: 50
                color: selected ? "#4CAF50" : "#FFFFFF"
                border.color: "#CCCCCC"
                radius: 4

                // 选中状态变化时的颜色动画
                Behavior on color {
                    ColorAnimation { duration: 200 }
                }

                // 缩放动画
                scale: mouseArea.pressed ? 0.98 : 1.0
                Behavior on scale {
                    NumberAnimation { duration: 100 }
                }

                // 内容
                Text {
                    id: itemText
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 15
                    text: name
                    font.pixelSize: 16
                    color: selected ? "white" : "black"

                    // 文本颜色动画
                    Behavior on color {
                        ColorAnimation { duration: 200 }
                    }
                }

                // 选择指示器(带动画)
                Rectangle {
                    id: checkIndicator
                    visible: selected
                    anchors.right: parent.right
                    anchors.rightMargin: 15
                    anchors.verticalCenter: parent.verticalCenter
                    width: 20
                    height: 20
                    radius: 10
                    color: "white"
                    opacity: selected ? 1.0 : 0.0
                    scale: selected ? 1.0 : 0.5

                    // 选中指示器动画
                    Behavior on opacity {
                        NumberAnimation { duration: 200 }
                    }
                    Behavior on scale {
                        NumberAnimation {
                            duration: 300
                            easing.type: Easing.OutBack
                        }
                    }

                    Text {
                        anchors.centerIn: parent
                        text: "✓"
                        color: "#4CAF50"
                        font.bold: true
                    }
                }

                // 点击处理(添加动画反馈)
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: {
                        if (root.singleSelectionMode) {
                            // 单选模式 - 取消之前的选择，选择当前项
                            if (lastSelectedIndex !== -1 && lastSelectedIndex !== index) {
                                listModel.setProperty(lastSelectedIndex, "selected", false)
                            }
                            listModel.setProperty(index, "selected", !selected)
                            lastSelectedIndex = index
                        } else {
                            // 多选模式 - 切换当前项的选择状态
                            listModel.setProperty(index, "selected", !selected)

                            // 添加点击涟漪效果
                            rippleEffect.start()
                        }
                    }
                }

                // 点击涟漪效果(仅多选模式)
                Rectangle {
                    id: ripple
                    width: parent.width * 2
                    height: parent.height * 2
                    radius: width / 2
                    color: Qt.rgba(1, 1, 1, 0.2)
                    x: mouseArea.mouseX - width / 2
                    y: mouseArea.mouseY - height / 2
                    scale: 0.1
                    opacity: 0
                    visible: !singleSelectionMode
                }

                // 涟漪动画
                SequentialAnimation {
                    id: rippleEffect
                    running: false

                    ParallelAnimation {
                        NumberAnimation {
                            target: ripple
                            property: "scale"
                            from: 0.1
                            to: 1.0
                            duration: 400
                            easing.type: Easing.OutQuad
                        }
                        NumberAnimation {
                            target: ripple
                            property: "opacity"
                            from: 0.4
                            to: 0
                            duration: 400
                        }
                    }
                    ScriptAction {
                        script: {
                            ripple.scale = 0.1
                            ripple.opacity = 0
                        }
                    }
                }
            }
        }

        // 底部信息栏(带动画)
        Rectangle {
            id: infoBar
            width: parent.width
            height: 50
            color: "#EEEEEE"

            // 背景色动画
            Behavior on color {
                ColorAnimation { duration: 300 }
            }

            Text {
                id: infoText
                anchors.centerIn: parent
                text: {
                    var selectedCount = 0
                    for (var i = 0; i < listModel.count; i++) {
                        if (listModel.get(i).selected) selectedCount++
                    }
                    return "已选择 " + selectedCount + " 项" +
                           (singleSelectionMode ? " (单选模式)" : " (多选模式)")
                }
                font.bold: true

                // 文本变化时的动画
                PropertyAnimation on scale {
                    id: textScaleAnim
                    duration: 200
                    from: 1.1
                    to: 1.0
                }

                onTextChanged: {
                    textScaleAnim.restart()
                }
            }
        }
    }

    // 模式切换动画
    ParallelAnimation {
        id: modeSwitchAnimation
        NumberAnimation {
            target: singleSelectBtn
            property: "scale"
            from: 1.0
            to: 1.1
            duration: 100
        }
        NumberAnimation {
            target: multiSelectBtn
            property: "scale"
            from: 1.0
            to: 1.1
            duration: 100
        }
        NumberAnimation {
            target: singleSelectBtn
            property: "scale"
            from: 1.1
            to: 1.0
            duration: 100
            easing.type: Easing.OutBack
        }
        NumberAnimation {
            target: multiSelectBtn
            property: "scale"
            from: 1.1
            to: 1.0
            duration: 100
            easing.type: Easing.OutBack
        }
    }

    // 清除选择动画
    SequentialAnimation {
        id: selectionClearAnimation
        ParallelAnimation {
            ColorAnimation {
                target: infoBar
                property: "color"
                to: "#FFCDD2" // 浅红色
                duration: 200
            }
            NumberAnimation {
                target: infoText
                property: "scale"
                to: 1.1
                duration: 200
            }
        }
        ParallelAnimation {
            ColorAnimation {
                target: infoBar
                property: "color"
                to: "#EEEEEE"
                duration: 300
            }
            NumberAnimation {
                target: infoText
                property: "scale"
                to: 1.0
                duration: 300
            }
        }
    }

    // 清除所有选择
    function clearSelection() {
        for (var i = 0; i < listModel.count; i++) {
            listModel.setProperty(i, "selected", false)
        }
        lastSelectedIndex = -1
    }

    // 添加新项的示例函数
    function addNewItem() {
        listModel.append({"name": "选项" + (listModel.count + 1), "selected": false})
    }
}
